import BaseInput from "@/components/base/Input"
import { DataPickerType, Props } from "@/components/form_item/formItemConfig"
import styled from "@emotion/styled"
import { memo } from "react"
import { useFormContext } from "react-hook-form"
import Svg from "../base/Svg"

const DateTimePicker = memo(
    ({
        fieldName,
        inputType,
        required,
        initValue,
        style,
        className = "",
    }: Props & { inputType: DataPickerType }) => {
        const methods = useFormContext()
        const { watch, register, formState, getFieldState, resetField } = methods
        const Clear = () => {
            resetField(fieldName)
        }
        const values = watch(fieldName)
        const errorsName = formState.errors[fieldName]
        const FieldState = getFieldState(fieldName, formState)
        const optionsReg = {
            required: {
                message: `${fieldName} is required`,
                value: required ?? true,
            },
            value: initValue,
        }

        return (
            <InputItem
                className={`
                    ${errorsName?.message ? " error " : " "} 
                    ${className}
                `}
            >
                <DateTimePickerBox
                    style={style}
                    type={inputType}
                    {...register(fieldName, optionsReg)}
                />
                {errorsName && (
                    <VerifyMessage>
                        <em>
                            <Svg src={"components/form_item/public_fail_icon.svg"} />
                        </em>
                        {errorsName?.message as string}
                    </VerifyMessage>
                )}
            </InputItem>
        )
    },
)

export default DateTimePicker

const InputItem = styled.div`
    position: relative;
    display: flex;

    &.error p {
        display: block;
    }

    &.error input {
        border-color: #fb2d60;
        background-color: #fee0e7;
    }
`

const DateTimePickerBox = styled(BaseInput)`
    width: max(120rem, calc(100% - 130rem));
    height: 36rem;
    border-radius: 8rem;
    background-color: #fff;
    //border: none;
    outline: none;
    padding: 0 12rem;
    font-family: "Gilroy", sans-serif;
    font-weight: 500;
    font-size: 14rem;
    line-height: 20rem;
    letter-spacing: 0;
    color: #9fa78c;
    position: relative;
    text-align: left;
    text-transform: capitalize;
    border: 1px solid #f2f3f5;
`

const VerifyMessage = styled.p`
    display: none;
    position: absolute;
    bottom: -32rem;
    left: 0;
    font-family: "Gilroy", sans-serif;
    font-weight: 400;
    font-size: 12rem;
    line-height: 16rem;
    letter-spacing: 0;
    color: #fb2d60;
    padding-left: 20rem;

    & > em {
        position: absolute;
        display: block;
        width: 16rem;
        height: 16rem;
        top: 0;
        left: 0;
        line-height: normal;
        text-align: center;
    }

    &.stepNextvm {
        display: block;
        position: initial;
        margin: 0;
        padding: 0;
    }

    &.stepNextvm::before {
        display: none;
    }

    &.codemsg {
        position: relative;
        margin: 0;
        bottom: -4rem;
        left: 0;
    }

    &.codemsg.error {
        display: block;
    }
`
